<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User Management</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<link rel="stylesheet" href="/css/users.css">

</head>
<body>
    <div class="sidebar">
        <a href="#" class="add-link">Add User</a>
        <a href="#" class="delete-link">Delete User</a>
        <a href="#" class="all-link">All Users</a>
    </div>
    <div class="main">
        <h1>User Management</h1>
        <div class="add-form hidden">
			<!-- 添加用户模块 -->
            <h2>Add User</h2>
            <form>
                <label>Username:</label>
                <input type="text" name="username"><br>
                <label>Password:</label>
                <input id="add-input" type="password" name="password"><br>
                <button type="button" id="add-btn">Add User</button>
            </form>
        </div>
		<!-- 删除用户模块 -->
        <div class="delete-form hidden">
            <h2>Delete User</h2>
            <form>
                <label>Username:</label>
                <input type="text" name="username"><br>
                <button type="button" id="delete-btn">Delete User</button>
            </form>
        </div>
        <!-- 信息展示功能块 -->
        <div class="all-users">

            <!-- 搜索模块 -->
            <form id="search-form">
              <div class="form-group">
                <label for="search-input">username：</label>
                <input type="text" class="form-control" id="search-input" placeholder="输入用户名">
                <button type="submit" class="btn btn-primary">搜索</button>
              </div>

            </form>
            <div id="user-info"></div>
			<!-- 用户信息展示模块 -->
            <h2>All Users</h2>
            <table>
                <tbody id="user-body">
                </tbody>
            </table>
        </div>
    </div>

    <script>
        $('.add-link').click(function() {
            $('.add-form').removeClass('hidden');
            $('.delete-form').addClass('hidden');
            $('.all-users').addClass('hidden');
        });

        $('.delete-link').click(function() {
            $('.add-form').addClass('hidden');
            $('.delete-form').removeClass('hidden');
            $('.all-users').addClass('hidden');
        });

        $('.all-link').click(function() {
            $('.add-form').addClass('hidden');
            $('.delete-form').addClass('hidden');
            $('.all-users').removeClass('hidden');
        });

        // 添加用户
        $('#add-btn').click(function() {
            $.ajax({
                type: "POST",
                url: "http://127.1.1.1:888/add",
                data: $('form:eq(0)').serialize(),
                success: function(data) {
                    alert(data);
                    $('form:eq(0) input').val('');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });
        });
        // 删除用户
        $('#delete-btn').click(function() {
            $.ajax({
                type: "POST",
                url: "http://127.1.1.1:888/delete",
                data: $('form:eq(1)').serialize(),
                success: function(data) {
                    alert(data);
                    $('form:eq(1) input').val('');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                }
            });
        });
        // 获取所有用户信息
        $.ajax({
            type: "GET",
            url: "http://127.1.1.1:888/users",
            success: function(data) {
                $('#user-body').append(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            }
        });

        // 搜索功能
        $('#search-form').submit(function(event) {
          event.preventDefault();
          var form = $(this);
          $.ajax({
            url: 'http://127.1.1.1:888/search/' + form.find('#search-input').val(),
            method: 'GET',
            success: function(response) {
              var userInfo = '<h3>用户信息</h3>';
              userInfo += '<p>id：' + response.id + '</p>';
              userInfo += '<p>username：' + response.username + '</p>';
              userInfo += '<p>password：' + response.password + '</p>';
              userInfo += '<p>email：' + response.email + '</p>';
              userInfo += '<p>mobile_phone：' + response.mobile_phone + '</p>';
              userInfo += '<p>fullname：' + response.fullname + '</p>';
              userInfo += '<p>flag：' + response.flag + '</p>';
              $('#user-info').html(userInfo);
            },
            error: function(response) {
              alert(response.responseJSON.error);
              $('#user-info').html('');
            }
          });
        });

    </script>
</body>
</html>